<template>
    <div class="storeyMode">
        <div class="clip-tools_pan">
            楼层模式
        </div>
        <div class='clip-tools_body' id="storeyBody">
            <div v-for='(item, index) in storeyDatas' :key="index" class='storeyItem'>
                <label class="storeyName">{{ item.name }}</label>
                <input type="checkbox" class='switch' :id='"check" + item.name'>
            </div>
        </div>
    </div>
</template>

<script>
    let  nowShowMeshKey,hideMeshKeys
    export default {
        name: "storey",
        data:function () {
            return {

            }
        },
        props:["currentTool","storeyDatas"],
        methods:{
            storey: function() {
                alert(this.storeyDatas.length);
                if(this.storeyDatas.length === 0) {

                    let keys = Object.keys(GOLOAlBAL_OPEOBJ.storeyDatas);
                    keys.forEach(item => {
                        this.storeyDatas.push({name: item})
                    })
                    alert(this.storeyDatas.length);
                }

                let storeyBody = document.getElementById('storeyBody');
                storeyBody.addEventListener('input', function(e) {
                    if(e.target.checked) {
                        // 检查是否已经有选择的楼层,如有就将上次选中的取消
                        if(nowShowMeshKey && hideMeshKeys) {
                            let dom = document.getElementById(nowShowMeshKey);
                            alert("d")
                            dom.checked = false;
                            for(let i = 0; i < hideMeshKeys.length; i++) {
                                let meshArr = GOLOAlBAL_OPEOBJ.storeyDatas[hideMeshKeys[i]];
                                meshArr.forEach(item => {
                                    GOLOAlBAL_OPEOBJ.bimModel.objects[item.guid].visible = true;
                                })
                            }
                        }
                        let idFromDom = e.target.getAttribute('id');
                        alert("now:")
                        nowShowMeshKey = idFromDom;

                        // idFromDom重新计算的原因是dom上的id是以check开头,所以需要去掉check
                        idFromDom = idFromDom.split('').splice(5).join('')

                        let keys = Object.keys(GOLOAlBAL_OPEOBJ.storeyDatas);
                        for(let i = 0; i < keys.length; i++) {
                            if(keys[i] !== idFromDom) {
                                if(!hideMeshKeys) {
                                    hideMeshKeys = [];
                                }
                                hideMeshKeys.push(keys[i]);
                                let meshArr = GOLOAlBAL_OPEOBJ.storeyDatas[keys[i]];
                                meshArr.forEach(item => {
                                    GOLOAlBAL_OPEOBJ.bimModel.objects[item.guid].visible = false;
                                })
                            }
                        }
                    } else {
                        nowShowMeshKey = null;
                        alert("hide:"+hideMeshKeys);
                        for(let i = 0; i < hideMeshKeys.length; i++) {
                            let meshArr = GOLOAlBAL_OPEOBJ.storeyDatas[hideMeshKeys[i]];
                            meshArr.forEach(item => {
                                GOLOAlBAL_OPEOBJ.bimModel.objects[item.guid].visible = true;
                            })
                        }
                        hideMeshKeys = null;
                    }
                })
            },
        },
        watch:{
            currentTool:{
                handler(newValue, oldValue) {
                    console.log("ddd")
                    console.log(newValue);
                    console.log(oldValue);
                },
                deep: true
            }
        },
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        mounted(){
            this.storey();
        },
        beforeUpdate(){

        },
        updated(){

        },
        beforeDestroy(){

        },
        destroyed(){

        }
    }
</script>

<style scoped>
    @import "css/storey.css";
</style>